<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/vue-router.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/animate.css">

    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(200px);
        }
        
        .v-enter-active,
        .v-leave-active {
            transition: all 0.5s ease;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <!-- <div class="row">
            <router-link to="/login tag=" button " class="btn btn-primary ">登录</router-link>
            <router-link to="/register " tag="button " class="btn btn-success ">注册</router-link>
        </div> -->
        <div class="row">
            <transition mode="out-in">
                <router-view></router-view>
            </transition>
        </div>
    </div>

    <template id="welcomeTemp">
        <div class="jumbotron">
            <div class="container">
                <h1>Hello, world!</h1>
                <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                <p>
                    <router-link to="/account/login" class="btn btn-primary btn-sm">登录</router-link>
                    <router-link to="/account/register" class="btn btn-primary btn-sm">注册</routerLink>
                </p>
                <transition mode="out-in">
                    <router-view></router-view>
                </transition>
            </div>
        </div>
    </template>

    <template id="loginTemp">
        <form>
            <h3>登录</h3>
            <div class="form-group">
                <label for="usernameLogin">username</label>
                <input type="text" id="usernameLogin" class="form-control" placeholder="please enter username">
            </div>
            <div class="form-group">
                <label for="passwordLogin">password</label>
                <input type="password" id="passwordLogin" class="form-control" placeholder="enter your password">
            </div>
            <button class="btn btn-default col-md-12 ">登录</button>
        </form>
    </template>

    <template id="registerTemp">
        <form>
            <h3>注册</h3>
            <div class="form-group">
                <label for="usernameRegister">username</label>
                <input type="text" id="usernameRegister" class="form-control" placeholder="enter your username">
            </div>
            <div class="form-group">
                <label for="passwordRegister">password</label>
                <input type="password" id="passwordRegister" class="form-control" placeholder="enter your password">
            </div>
            <button class="btn btn-primary col-md-12">注册</button>
        </form>
    </template>


    <script>
        var loginTemp = {
            template: '#loginTemp'
        }

        var registerTemp = {
            template: '#registerTemp'
        }

        var welcomeTemp = {
            template: '#welcomeTemp'
        }

        var routerObj = new VueRouter({
            routes: [{
                path: '/account',
                component: welcomeTemp,
                children: [{
                    path: 'login',
                    component: loginTemp
                }, {
                    path: 'register',
                    component: registerTemp
                }]
            }, {
                path: '/',
                redirect: '/account'
            }]
        });

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            // wacth的强大之处是可以监听一些非DOM元素的改变
            watch: {
                '$route.path': function(newPath, oldPath) {
                    alert(newPath + "---------" + oldPath);
                }
            },
            router: routerObj
        });
    </script>
</body>

</html>